<!DOCTYPE html>
<html lang="en">
<head>
  
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">


  <!-- <link rel="stylesheet" href="../../../css/sm.min.css">
  <link rel="stylesheet" href="../../../css/sm-extend.min.css">
  <script type="text/javascript" src="../../../common/common.js"></script> -->
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/sm.min.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/sm-extend.min.css">
  <script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/common/common.js"></script>

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="swiper.min.css">
  <script src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/html/Home/findJintian/swiper.min.css"></script>


  <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #000;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    }
    .swiper-slide {
      background-size: cover;
      background-position: center;
    }
    .gallery-top {
      height: 80%;
      /* height: auto; */
      width: 100%;
    }
    .gallery-thumbs {
      height: 4rem;
      box-sizing: border-box;
      padding: 10px 0;
    }
    .gallery-thumbs .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-thumb-active {
      opacity: 1;
    }

    /* .page.page-current{
      overflow: auto;
    }
    .gallery-top{
      overflow: auto;
    } */

    /* .infinite-scroll-preloader {
        margin-top:-20px;
    } */
    /* .titleName{
      text-align: center;
      margin-top: 2rem;
    } */
    .list-block{
      margin: 0;
    }
    .loaded{
      text-align: center;
      margin: 0.6rem 0;
      display:none;
    }
  </style>
</head>
<body>
  
  <div class="page-group">
    <div class="page">
     
      <header class="bar bar-nav">
        <button class="button button-link button-nav pull-left">
          <span class="icon icon-left"></span>
        </button>
        <button class="button button-link button-nav pull-right">
          地图
        </button>
        <h1 class="title">发现金天</h1>
      </header>

      <!-- 页面内容区域 -->
      <!-- Swiper -->
      <div class="swiper-container gallery-thumbs">
          <div class="swiper-wrapper" style="margin-top: 2rem;text-align: center;">
            <div class="swiper-slide">中心店</div>
            <div class="swiper-slide">体验店</div>
            <div class="swiper-slide">今天酒店</div>
            <div class="swiper-slide">养生馆</div>
            <div class="swiper-slide">美食城</div>
          </div>
      </div>
      <div class="swiper-container gallery-top">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="list-block media-list">
                    <!-- 添加 class infinite-scroll 和 data-distance  向下无限滚动可不加infinite-scroll-bottom类，这里加上是为了和下面的向上无限滚动区分-->
                    <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100">
                        <div class="list-block">
                            <ul class="list-container child0">
                            </ul>
                        </div>
                        <!-- 加载提示符 -->
                        <div class="infinite-scroll-preloader" id="preloader0">
                            <div class="preloader" style="position: static;margin: 0;"></div>
                        </div>
                        <div class="loaded loaded0">已加载全部</div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
              <div class="list-block media-list">
                    <!-- 添加 class infinite-scroll 和 data-distance  向下无限滚动可不加infinite-scroll-bottom类，这里加上是为了和下面的向上无限滚动区分-->
                    <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100">
                        <div class="list-block">
                            <ul class="list-container child1">
                            </ul>
                        </div>
                        <!-- 加载提示符 -->
                        <div class="infinite-scroll-preloader" id="preloader1">
                            <div class="preloader" style="position: static;margin: 0;"></div>
                        </div>
                        <div class="loaded loaded1">已加载全部</div>
                    </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="list-block media-list">
                    <!-- 添加 class infinite-scroll 和 data-distance  向下无限滚动可不加infinite-scroll-bottom类，这里加上是为了和下面的向上无限滚动区分-->
                    <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100">
                        <div class="list-block">
                            <ul class="list-container child2">
                            </ul>
                        </div>
                        <!-- 加载提示符 -->
                        <div class="infinite-scroll-preloader" id="preloader2">
                            <div class="preloader" style="position: static;margin: 0;"></div>
                        </div>
                        <div class="loaded loaded2">已加载全部</div>
                    </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="list-block media-list">
                    <!-- 添加 class infinite-scroll 和 data-distance  向下无限滚动可不加infinite-scroll-bottom类，这里加上是为了和下面的向上无限滚动区分-->
                    <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100">
                        <div class="list-block">
                            <ul class="list-container child3">
                            </ul>
                        </div>
                        <!-- 加载提示符 -->
                        <div class="infinite-scroll-preloader" id="preloader3">
                            <div class="preloader" style="position: static;margin: 0;"></div>
                        </div>
                        <div class="loaded loaded3">已加载全部</div>
                    </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="list-block media-list">
                    <!-- 添加 class infinite-scroll 和 data-distance  向下无限滚动可不加infinite-scroll-bottom类，这里加上是为了和下面的向上无限滚动区分-->
                    <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100">
                        <div class="list-block">
                            <ul class="list-container child4">
                            </ul>
                        </div>
                        <!-- 加载提示符 -->
                        <div class="infinite-scroll-preloader" id="preloader4">
                            <div class="preloader" style="position: static;margin: 0;"></div>
                        </div>
                        <div class="loaded loaded4">已加载全部</div>
                    </div>
              </div>
            </div>
          </div>
          <!-- Add Arrows -->
          <!-- <div class="swiper-button-next swiper-button-white"></div>
          <div class="swiper-button-prev swiper-button-white"></div> -->
        </div>
        
      




    </div>
  </div>
  <!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
<script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/sm.min.js' charset='utf-8'></script>
<!-- <script type='text/javascript' src='https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/sm-extend.min.js' charset='utf-8'></script> -->
<script src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/swiper/swiper.min.js"></script>


  <!-- Swiper JS -->
  <!-- <script src="swiper.min.js"></script> -->
  <script src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/html/Home/findJintian/swiper.min.js"></script>
  


<script type="text/javascript">
  

  //放函数区域

  var indexNow = 0;
  // 存放数据信息的数组
  var storeList = [
    // {
    //   lastIndex: 10,
    //   offset: 0
    // }
  ];
  // swiper
  function toSwiper() {
    var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 0,
      slidesPerView: 5,
      freeMode: true,
      watchSlidesVisibility: true,
      watchSlidesProgress: true
    });
    var galleryTop = new Swiper('.gallery-top', {
      spaceBetween: 10,
      // navigation: {
      //   nextEl: '.swiper-button-next',
      //   prevEl: '.swiper-button-prev',
      // },
      thumbs: {
        swiper: galleryThumbs
      },
      on: {
        init: function(){
          //Swiper初始化了
          // console.log('当前的slide序号是'+this.activeIndex)
          storeList[this.activeIndex] = {
            lastIndex: 0, // 默认为0
            offset: 0
          }
          // console.log(storeList)
        }, 
        slideChangeTransitionEnd: function(){
          // console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
          indexNow = this.activeIndex
          if(storeList[this.activeIndex] == undefined){
            storeList[this.activeIndex] = {
              lastIndex: 0, // 默认为0
              offset: 0
            }
            getData()
          }
          // console.log(storeList)
        },
      },
    });
    // function theIndex(){
    //   console.log(galleryThumbs.activeIndex);
    // }
  }




  // 无限滚动
  // 加载flag
  var loading = false;
  // 最多可加载的条目
  var maxItems = 100;
  // 每次加载添加多少条目
  var itemsPerLoad = 10;
  function addItems(data) {
          // number 添加数量
          // lastIndex 最后一次加载的数量
          // 生成新条目的HTML
          var html = '';
          for (var i = 0; i < data.length; i++) {
              html += '\
              <li>\
                <div class="item-content">\
                  <div class="item-media">\
                    <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style="width: 2.2rem;">\
                  </div>\
                  <div class="item-inner">\
                    <div class="item-title-row">\
                      <div class="item-title">标题' + (i+1+storeList[indexNow].lastIndex) + '</div>\
                    </div>\
                    <div class="item-subtitle">子标题</div>\
                  </div>\
                </div>\
              </li>\
              ';
          }
          // // 添加新条目
          // // console.log('.infinite-scroll-bottom .child' + (indexNow))
          $('.infinite-scroll-bottom .child' + (indexNow)).append(html);
          // 刷新下次获取后台数据位置
          storeList[indexNow].offset += data.length
          // 更新最后加载的序号
          storeList[indexNow].lastIndex = $('.child' + indexNow + ' li').length;
          // 停止加载符号，显示加载全部
          if(data.length<itemsPerLoad){
            $('#preloader'+ indexNow).remove();
            $('.loaded' + indexNow).show();
          }
  }
  // 上次加载的序号 (该数存放在相对应的数组数据中)
  var lastIndex = 10;
  // 注册'infinite'事件处理函数
  $(document).on('infinite', '.infinite-scroll-bottom',function() {
      console.log(1111)
      // 如果正在加载，则退出
      if (loading) return;
      // 设置flag
      loading = true;
      // 模拟1s的加载过程
      setTimeout(function() {
          // 重置加载flag
          loading = false;
          if (lastIndex >= maxItems) {
              // 加载完毕，则注销无限加载事件，以防不必要的加载
              $.detachInfiniteScroll($('.infinite-scroll'));
              // 删除加载提示符
              // $.toast('开清请求接口');
              // $('.infinite-scroll-preloader').remove();
              $('#preloader'+ indexNow).remove();
              return;           
          }
          // 添加新条目(调取接口数据)
          getData()
          // 更新最后加载的序号
          // storeList[indexNow].lastIndex = $('.child' + indexNow + ' li').length;
          //容器发生改变,如果是js滚动，需要刷新滚动
          $.refreshScroller();
      }, 1000);
  });


  function getData(){
    var params = {}
    net_request('get','api/v1/mallproducts?limit='+itemsPerLoad+'&offset='+ storeList[indexNow].offset,params,successCallBack,errorCallBack);
    // $.toast('开清请求接口');
  }

  function successCallBack(data){
    // alert(JSON.stringify(data));
    // 预先加载数量
    if(isNotNull(data)){
      if(isNotNull(data.data)){
        if(isNotNull(data.data.list)){
          addItems(data.data.list);
        }
      }
    }
  }
  function errorCallBack(data){
    // alert(JSON.stringify(data));
  }

  //需要初始化传递数据的函数，函数名，跟参数都不要变，固定写死的
  function getParams(data){
   // data需要转成json调用 ，函数urlParamParseJson();
     /*var jodata = JSON.parse(data); 
     if(isNotNull(jodata)){//
      
        
     }*/
     if(isNotNull(data)){
        // $$("#div_version").html("版本号：V"+data);
     }
  }



  	
  // 初始化
  $(function(){
    $.init();
    toSwiper();
    getData();
  });
  </script>
</body>
</html>